<template>
<!-- 库位业务类型 -->
    <div>
        <el-row>
            <el-col :span="24">
                <el-popover
                    v-if="readonly && checkedData && checkedData.length > 2"
                    placement="top"
                    title=""
                    width="200"
                    trigger="hover">
                        <ul>
                            <li v-for="(it,i) in selectData" :key="i">{{ it }}</li>
                        </ul>
                        <template slot="reference">
                            <el-select disabled v-model="checkedData" multiple collapse-tags>
                                <el-option v-for="item in options" :key="item.attributeCode" :label="item.attributeValue" :value="item.attributeCode"></el-option>
                            </el-select>
                        </template>
                </el-popover>
                <el-select v-else v-model="checkedData" multiple :collapse-tags="checkedData && checkedData.length > 2"  @change="changeData" value-key="transportWayCode">
                    <el-option v-for="item in options" :key="item.attributeCode" :label="item.attributeValue" :value="item.attributeCode"></el-option>
                </el-select>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import nonStandardService from '@/services/nonStandardService'
export default {
    name: 'stockLocationTypes',
    props: {
        detail: {
            type: Object,
            default: () => {
                return {}
            } 
        },
        value: [Object, String],
        disabled: Boolean,
        parameter: {
            type: Object,
            default: () => {
                return {}
            } 
        },
        data:{
            type: Object,
            default:() => {}
        },
        type: Number,
    },
    data(){
        return {
            options: [],
            checkedData: [],
            warehouseId: null,
            serviceTypeCode: null,
            selectData: null,
            readonly: false,
        }
    },
    created(){
        this.readonly = Boolean(this.$route.query.readonly);
        if(this.value){
            this.setData();
        }
        this.queryData();
    },
    methods: {
        queryData(){
            nonStandardService.queryLocationType({ tenantCode: localStorage.getItem('tenantCode') }).then(res => {
                if(res.code == 200){
                    this.options = res.data || [];
                    if(this.type == 1) {
                        this.checkedData = [res.data[0].attributeCode];
                        this.$emit('input', JSON.stringify(this.checkedData));
                        this.selectData = [res.data[0].attributeValue];
                    }
                }
            })
        },
        setData(){
            this.checkedData = JSON.parse(this.value).checkedData;
            this.selectData = JSON.parse(this.value).selectData;
        },
        changeData(val){
            this.selectData = [];
            val && val.map(it => {
                this.options && this.options.map(item => {
                    if(it == item.attributeCode){
                        this.selectData.push(item.attributeValue)
                    }
                })
            })
            if(val && val.length){
                this.$emit('input', JSON.stringify(this.checkedData));
            } else {
                this.$emit('input', '');
            }
        },
        getData(){
            return {
                value: this.selectData && this.selectData.join(','),
                selectData: this.selectData,
                checkedData: this.checkedData,
            } 
        }
    }
}
</script>

<style>

</style>